<template>
	<view>
	<tn-nav-bar fixed >套餐列表</tn-nav-bar>
	
  <view class="container" >
  <!-- Add button at the top -->
  <view class="add-btn-top">
    <u-button 
      type="primary" 
      @click="handleAdd"
    >添加套餐</u-button>
  </view>

    <!-- 套餐列表 -->
    <view class="meal-list"  v-for="(item, index) in mealList" :key="index">
     <view class="meal-item">
        <view class="meal-info">
          <view class="meal-header">
            <text class="store-name">{{ item.mchName }}</text>
            <text class="room-name">{{ item.roomName }}</text>
          </view>
          <view class="meal-content">
            <view class="meal-detail">
              <text class="label">时长：</text>
              <text class="value">{{ item.hours }}小时</text>
            </view>
            <view class="meal-detail">
              <text class="label">金额：</text>
              <text class="value price">¥{{ item.amount }}</text>
            </view>
          </view>
          <view class="meal-desc" v-if="item.descp">
            <text class="label">描述：</text>
            <text class="value">{{ item.descp }}</text>
          </view>
          <view class="meal-remark" v-if="item.remark">
            <text class="label">备注：</text>
            <text class="value">{{ item.remark }}</text>
          </view>
        </view>

		<view class="meal-actions">
          <u-button 
            type="primary" 
            size="mini"
            @click="handleEdit(item)"
          >编辑</u-button>
          <u-button 
            type="error" 
            size="mini"
            @click="handleDelete(item)"
          >删除</u-button>
        </view>
	  
      </view>
    </view>
</view>
</view>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      storeList: [],
      roomList: [],
      mealList: [],
	  total:0
    }
  },
  
  onShow() {
    this.getStoreList()
    this.getMealList()
  },
  
  methods: {
    // 获取门店列表
    getStoreList() {
      // 发送POST调用接口获取门店列表_已完成
      uni.$u.http.post('/system/store/list').then(res => {
		  
        this.storeList = res.data.map(item => ({
          value: item.id,
          label: item.name
        }))
      })
    },
    
    // 发送POST请求获取房间列表_已完成
    getRoomList(mchId) {
      uni.$u.http.post('/system/room/roomsByMchid', {
        mchid: mchId
      }).then(res => {
        this.roomList = res.data.map(item => ({
          value: item.id,
          label: item.roomName
        }))
      })
    },
    
    // 获取套餐列表
    getMealList() {
	  //发送HTTP请求获取套餐列表，包含pageNum（页码）和pageSize（每页数量）_已完成
      uni.$u.http.post('/system/meal/list', this.queryParams).then(res => {
        this.mealList = res.rows
		this.total=res.total
		console.log(this.mealList)
      })
    },
    
    // 门店选择改变
    handleStoreChange(value) {
      this.searchForm.roomId = ''
      if (value) {
        this.getRoomList(value)
      } else {
        this.roomList = []
      }
    },
    
    
    // 编辑套餐
    handleEdit(item) {
		uni.setStorageSync('mealInfo',item)
      uni.navigateTo({
        url: `/pages/meal/edit/index?id=${item.id}`
      })
    },
    
    // 删除套餐
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该套餐吗？',
        success: (res) => {
          if (res.confirm) {
			//发送POST删除指定id的套餐_未测试
            uni.$u.http.post('/system/meal/remove', {
              id: item.id
            }).then(() => {
              uni.$u.toast('删除成功')
              this.getMealList()
            })
          }
        }
      })
    },
    
    // 添加套餐
    handleAdd() {
      uni.navigateTo({
        url: '/pages/meal/edit/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
	margin-top:150rpx;
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
}


.meal-list {
  .meal-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-top: 20rpx;
    position: relative;
    
    .meal-info {
      padding: 24rpx;
      .meal-header {
        display: flex;
       
        margin-bottom: 16rpx;
        .divider {
      margin: 0 12rpx;
      color: #333;
      font-size: 36rpx;
      font-style: bold;
    }
    
    
      }
      
      .meal-content {
        display: flex;
        margin-bottom: 16rpx;
        
        .meal-detail {
          margin-right: 40rpx;
          
          .label {
            font-size: 26rpx;
            color: #999;
          }
          
          .value {
            font-size: 28rpx;
            color: #333;
            margin-left: 8rpx;
            
            &.price {
              color: #ff6b6b;
              font-weight: bold;
            }
          }
        }
      }
      
      .meal-desc, .meal-remark {
        font-size: 26rpx;
        margin-bottom: 12rpx;
        
        .label {
          color: #999;
        }
        
        .value {
          color: #666;
          margin-left: 8rpx;
        }
      }
    }
    
    .meal-actions {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      padding-right: 24rpx;

      .action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        cursor: pointer;
        transition: all 0.3s;

        .iconfont {
          font-size: 40rpx;
          margin-bottom: 4rpx;
        }

        &.edit {
          color: #2979ff;
          &:hover {
            background: rgba(41, 121, 255, 0.1);
          }
        }

        &.delete {
          color: #ff4d4f;
          &:hover {
            background: rgba(255, 77, 79, 0.1);
          }
        }
      }
    }
  }
}

.add-btn-top {
  margin: 20rpx;
  padding: 20rpx 0;
}
</style>